<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui"
    />
    <meta
      name="keywords"
      content="CSIST,成都软件技术专修学院,后台管理系统,学籍管理系统"
    />
    <meta name="description" content="成都软件技术专修学院学生学籍管理系统" />
    <meta name="author" content="Group 2, Class 1,21 SE" />
    <title>专修专业信息</title>
    <link rel="shortcut icon" type="image/x-icon" href="../favicon.ico" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-touch-fullscreen" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.min.css" />
    <link rel="stylesheet" type="text/css" href="../css/custom/all_page.css" />
  </head>
  <body>
    <div id="main" class="container-fluid">
      <div class="row">
        <div class="col-lg-12">
          <!-- card start -->
          <div class="card">
            <!-- card-header start -->
            <header
              class="card-header d-flex justify-content-between align-items-center"
            >
              <!-- breadcrumb navigator start -->
              <nav id="nav-title" aria-label="breadcrumb">
                <ol class="breadcrumb">
                  <li>当前位置：</li>
                  <li class="breadcrumb-item">学校信息管理</li>
                  <li class="breadcrumb-item active" aria-current="page">
                    专修专业信息
                  </li>
                </ol>
              </nav>
              <!-- breadcrumb navigator end -->
<!--              <a-->
<!--                class="btn btn-outline-primary"-->
<!--                data-bs-toggle="collapse"-->
<!--                href="#collapse-query-area"-->
<!--                role="button"-->
<!--                aria-expanded="false"-->
<!--                aria-controls="collapse-query-area"-->
<!--                @click="toggle"-->
<!--              >-->
<!--                {{unfoldOrfold}}查询栏-->
<!--              </a>-->
            </header>
            <!-- card-header end -->
            <!-- card-body start -->
            <div class="card-body">
              <!-- query-area card collapse start -->
<!--              <div-->
<!--                class="card collapse show"-->
<!--                id="collapse-query-area"-->
<!--                ref="collapse"-->
<!--              >-->
<!--                &lt;!&ndash; query-area card-body start &ndash;&gt;-->
<!--                <div class="card-body py-1">-->
<!--                  <span class="d-block mx-2 mb-2">查询条件</span>-->
<!--                  <div class="row">-->
<!--                    <div class="col-auto mb-2">-->
<!--                      <div class="input-group">-->
<!--                        <label class="input-group-text" for="majorCode">-->
<!--                          专修专业代号-->
<!--                        </label>-->
<!--                        <input-->
<!--                          type="text"-->
<!--                          id="majorCode"-->
<!--                          class="form-control"-->
<!--                          placeholder="请输入..."-->
<!--                          aria-label="查询专修专业代号的输入栏"-->
<!--                          v-model="queryGroup.majorCode"-->
<!--                        />-->
<!--                      </div>-->
<!--                    </div>-->
<!--                    <div class="col-auto mb-2">-->
<!--                      <div class="input-group">-->
<!--                        <label class="input-group-text" for="majorName">-->
<!--                          专修专业名称-->
<!--                        </label>-->
<!--                        <input-->
<!--                          type="text"-->
<!--                          id="majorName"-->
<!--                          class="form-control"-->
<!--                          placeholder="请输入..."-->
<!--                          aria-label="查询专修专业名称的输入栏"-->
<!--                          v-model="queryGroup.majorName"-->
<!--                        />-->
<!--                      </div>-->
<!--                    </div>-->
<!--                    <div class="col-auto mb-2">-->
<!--                      <div class="input-group-text">-->
<!--                        <div class="form-check form-switch">-->
<!--                          <label for="isFuzzy" class="form-check-label">-->
<!--                            模糊查询-->
<!--                          </label>-->
<!--                          <input-->
<!--                            type="checkbox"-->
<!--                            role="switch"-->
<!--                            id="isFuzzy"-->
<!--                            class="form-check-input"-->
<!--                            v-model="queryGroup.fuzzy"-->
<!--                          />-->
<!--                        </div>-->
<!--                      </div>-->
<!--                    </div>-->
<!--                    <div class="col-auto">-->
<!--                      <button-->
<!--                        class="btn btn-primary"-->
<!--                        type="button"-->
<!--                        @click="query"-->
<!--                      >-->
<!--                        查询-->
<!--                      </button>-->
<!--                    </div>-->
<!--                  </div>-->
<!--                </div>-->
<!--                &lt;!&ndash; query-area card-body end &ndash;&gt;-->
<!--              </div>-->
              <!-- query-area card collapse end -->
              <!-- function-area start -->
              <div id="function-area" class="d-flex justify-content-end mb-2">
                <button
                  id="importBtn"
                  class="btn btn-primary mx-2"
                  type="button"
                  @click="importInfo"
                >
                  导入
                </button>
                <button
                  id="exportBtn"
                  class="btn btn-primary mx-2"
                  type="button"
                  @click="exportInfo"
                >
                  导出
                </button>
                <button
                  id="addBtn"
                  class="btn btn-primary mx-2"
                  type="button"
                  data-bs-toggle="modal"
                  data-bs-target="#addModal"
                >
                  添加
                </button>
              </div>
              <!-- function-area end -->
              <!-- spinners start -->
              <div
                class="d-flex align-items-center flex-column my-3"
                v-if="!pagination"
              >
                <div class="text-primary fw-bolder">加载中...</div>
                <div class="spinner-grow text-primary m-3" role="status">
                  <span class="visually-hidden">Loading...</span>
                </div>
              </div>
              <!-- spinners end -->
              <div v-else>
                <!-- table start -->
                <table class="table table-hover border-top border-2">
                  <thead>
                    <tr>
                      <th scope="col" class="col-1">序号</th>
                      <th scope="col" class="col-1">专业代号</th>
                      <th scope="col" class="col-2">专业名称</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="(item,index) in list" :key="item.smiId">
                      <td>{{index + 1}}</td>
                      <td>{{item.smiCode}}</td>
                      <td>{{item.smiName}}</td>
                    </tr>
                  </tbody>
                </table>
                <!-- table end -->
                <!-- pagination start -->
                <nav aria-label="Page navigation example">
                  <ul class="pagination justify-content-center">
                    <li
                      class="page-item"
                      :style="pagination.hasPreviousPage?'':'pointer-events:none;'"
                    >
                      <a
                        class="page-link"
                        href="javascript:void(0)"
                        title="上一页"
                        @click="query(pagination.prePage)"
                      >
                        <span aria-hidden="true">&laquo;</span>
                      </a>
                    </li>
                    <li
                      :class="num == pagination.pageNum ? 'page-item active': 'page-item'"
                      v-for="num in pagination.navigatepageNums"
                      :key="num"
                    >
                      <a
                        class="page-link"
                        href="javascript:void(0)"
                        v-if="num == pagination.pageNum"
                      >
                        {{num}}
                      </a>
                      <a
                        class="page-link"
                        href="javascript:void(0)"
                        v-else
                        @click="query(num)"
                      >
                        {{num}}
                      </a>
                    </li>
                    <li
                      class="page-item"
                      :style="pagination.hasNextPage?'':'pointer-events:none;'"
                    >
                      <a
                        class="page-link"
                        href="javascript:void(0)"
                        title="下一页"
                        @click="query(pagination.nextPage)"
                      >
                        <span aria-hidden="true">&raquo;</span>
                      </a>
                    </li>
                  </ul>
                </nav>
                <!-- pagination end -->
              </div>
            </div>
            <!-- card-body end -->
          </div>
          <!-- card end -->
        </div>
      </div>
      <!-- modal start -->
      <div
        class="modal fade"
        id="addModal"
        tabindex="-1"
        data-bs-backdrop="static"
        aria-labelledby="addModalLabel"
        aria-hidden="true"
      >
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
          <div class="modal-content">
            <!-- modal-header start -->
            <div class="modal-header">
              <div class="modal-title" id="addModalLabel">新建内容</div>
              <button
                type="button"
                class="btn-close"
                data-bs-dismiss="modal"
                aria-label="Close"
              ></button>
            </div>
            <!-- modal-header end -->
            <!-- modal-body start -->
            <div class="modal-body">
              <div class="row">
                <span>提示：功能尚未完善，页面暂不显示</span>
              </div>
            </div>
            <!-- modal-body end -->
            <!-- modal-footer start -->
            <div class="modal-footer">
              <button type="button" class="btn btn-primary" @click="add">
                确认
              </button>
              <button
                type="button"
                class="btn btn-secondary"
                data-bs-dismiss="modal"
              >
                取消
              </button>
            </div>
            <!-- modal-footer end -->
          </div>
        </div>
      </div>
      <!-- modal end -->
    </div>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap-notify.min.js"></script>
    <script type="text/javascript" src="../js/main.min.js"></script>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script
      type="text/javascript"
      src="../js/custom/specialized_majors_info_page.js"
    ></script>
  </body>
</html>
